<!--
 * @Author: boyyang
 * @Date: 2022-01-27 17:08:37
 * @LastEditTime: 2022-01-31 13:11:44
 * @LastEditors: boyyang
 * @Description: 
 * @FilePath: \boyyang\plugin\boyyangUI\button\index.vue
-->

<template>
    <div class="y-btn-wrapper">
        <div :class="['btn', {'btn-disable': props.isDisable}]" @click="btnClick">{{ props.text }}</div>
    </div>
</template>

<script lang="ts" setup>
interface IBtnProps {
    text?: string;
    width?: number;
    height?: number;
    bgColor?: string;
    borderRaduis?: number;
    fontSize?: number;
    fontColor?: string;
    fontWeight?: string | number;
    isDisable?: boolean
}

interface IBtnEmits {
    (e: 'btnClick'): void
}

const props = withDefaults(defineProps<IBtnProps>(), {
    text: '确认????',
    width: 100,
    height: 40,
    bgColor: '#63e2b7',
    borderRaduis: 5,
    fontSize: 15,
    fontColor: 'whitesmoke',
    fontWeight: 400,
    isDisable: false
})

const emits = defineEmits<IBtnEmits>()

const btnClick = () => {
    if (props.isDisable) {
        return
    }
    emits('btnClick')
}
</script>

<style scoped lang="scss">
.y-btn-wrapper {
    display: inline-block;
}

.btn {
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    width: calc(v-bind("props.width") * 1px);
    height: calc(v-bind("props.height") * 1px);
    border-radius: calc(v-bind("props.borderRaduis") * 1px);

    background-color: v-bind("props.bgColor");

    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    font-size: calc(v-bind("props.fontSize") * 1px);
    font-weight: v-bind("props.fontWeight");
    color: v-bind("props.fontColor");

    cursor: pointer;
}

.btn-disable {
    cursor: not-allowed;
}
</style>